<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户登录</title>
  <!-- 引入样式 -->
  <link href="./css/element.css" rel="stylesheet">
  <link href="./css/main.css" rel="stylesheet">
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: url('https://images.unsplash.com/photo-1419833173245-f59e1b93f9ee?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center fixed; /* 背景图 */
      background-size: cover;
    }

    .particles {
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .login-container {
      width: 400px;
      margin: 100px auto;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
    }

    .login-form {
      display: flex;
      flex-direction: column;
    }

    .login-form .el-input,
    .login-form .el-button {
      margin-bottom: 15px;
    }

    .login-form .el-button {
      background-color: #f63;
      color: #fff;
    }

    h2 {
      text-align: center;
      color: #333;
    }
  </style>
</head>
<body>
<div class="particles" id="particles-js"></div> <!-- 粒子效果容器 -->
<div id="app">
  <div class="login-container">
    <h2>抗扑用户登录1233</h2>
    <div class="login-form">
      <el-input placeholder="请输入账号" v-model="form.username"></el-input>
      <el-input placeholder="请输入密码" v-model="form.password" type="password"></el-input>
      <el-button @click="login" style="width: 100%">登录</el-button>
      <div style="text-align: center; margin-top: 10px;">
        <a href="/register.html">还没有账号？去注册</a>
      </div>
    </div>
  </div>
</div>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/element.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script> <!-- 引入粒子库 -->
<script>
  // 粒子效果初始化
  particlesJS('particles-js', {
    particles: {
      number: { value: 100, density: { enable: true, value_area: 800 } },
      color: { value: "#ffffff" },
      shape: {
        type: "circle",
        stroke: { width: 0, color: "#000000" },
        polygon: { nb_sides: 5 },
        image: { src: "img/github.svg", width: 100, height: 100 }
      },
      opacity: {
        value: 0.5,
        random: false,
        anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
      },
      size: {
        value: 5,
        random: true,
        anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
      },
      line_linked: {
        enable: true,
        distance: 150,
        color: "#ffffff",
        opacity: 0.4,
        width: 1
      },
      move: {
        enable: true,
        speed: 6,
        direction: "none",
        random: false,
        straight: false,
        out_mode: "out",
        bounce: false,
        attract: { enable: false, rotateX: 600, rotateY: 1200 }
      }
    },
    interactivity: {
      detect_on: "canvas",
      events: {
        onhover: { enable: true, mode: "repulse" },
        onclick: { enable: true, mode: "push" },
        resize: true
      },
      modes: {
        grab: { distance: 400, line_linked: { opacity: 1 } },
        bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
        repulse: { distance: 200, duration: 1 },
        push: { particles_nb: 4 },
        remove: { particles_nb: 2 }
      }
    },
    retina_detect: true
  });

  const app = new Vue({
    el: "#app",
    data: {
      form: {
        username: '',
        password: ''
      }
    },
    methods: {
      login() {
        axios.post("http://localhost:8081/user/login", this.form)
          .then(({ data }) => {
            if (data && data.code === 1) {
              sessionStorage.setItem("token", data.data); // 只保存 token 字符串
              window.location.href = '/index.html';
            } else {
              this.$message.error("登录失败，请检查账号或密码！");
            }
          })
          .catch(err => {
            console.error(err);
            this.$message.error("登录失败，请稍后再试！");
          });
      }
    }
  });
</script>
</body>
</html>
